<template>
    <div @click="hiddenDel">
        <div class="empty" v-if="articles.length===0?111:''">
            <i class="iconfont">&#xe68e;</i>
            <p>你暂没有发布任何作品</p>
        </div>
         <div class="article" v-for="(article,index) in articles" >
            <div class="header clearfloat">
                <div class="header_img fl pointer">
                    <img v-bind:src="article.userId.headerImg|filterHeader" alt="" v-if="article.userId.headerImg">
                    <i class="icon iconfont" v-else>&#xe638;</i>                    
                </div>
                <div class="fl">
                    <span class="username pointer">{{article.userId.username}}</span>
                    <span class="datatime">{{article.createdAt| filterDate}}</span>
                </div>
            </div>
            <router-link v-bind:to="'/articleDetail/'+article._id" tag="h1">{{article.articleTitle}}</router-link>
            <p class="content"></p>
            <div class="operation">
                <div class="fl">
                    <span v-bind:class="{like_active:isLike}"><i class="iconfont" @click="like">&#xe645;</i><i v-if="isLike">{{article.giveLikes.length}}</i></span>
                    <span><i class="iconfont">&#xe62b;</i></span>
                </div>
                <div class="fr">
                    <span>阅读<span>{{article.readers}}</span></span>
                    <span class="iconfont pointer" @click="showDel" v-bind:index="index"
                    >&#xe637;</span>
                    <div class="del" v-if="isdel[index]">
                        <div v-bind:articleId="article._id" @click="delArticle">删除</div>
                        <div v-bind:articleId="article._id">编辑</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import dateformat from "../../assets/js/dateformat.js"
import filterHeader from '../../assets/js/filterHeaderImg.js'
    export default{
        data(){
            return{
                articles:[],//文章数据
                isLike:[],//点赞显示与隐藏
                isdel:[],//删除编辑显示与隐藏          
            }
        },
        computed:{

        },
        created:function(){
            this.getArticleList()
        },
        filters:{
           filterDate:dateformat,
           filterHeader:filterHeader

        },
        methods:{
            like:function(){
                this.isLike= true;
            },
            // 显示编辑和删除
            showDel:function(e){
                e.cancelBubble = true;
                var index = e.target.getAttribute('index');
                this.$set(this.isdel,index,!this.isdel[index]);
            },
            // 隐藏编辑和删除
            hiddenDel:function(){
                for(var i=0; i<this.isdel.length; i++){
                    this.$set(this.isdel,i,false);
                }
            },
            // 删除文章
            delArticle:function(e){
                var that = this;
                axios.get('/api/islogin').then(function(res){
                    if(res.data.state==="1"){
                        
                        axios.get('/api/personal/delArticle',{
                            params:{
                                _id:e.target.getAttribute('articleId'),
                                userId:that.$store.state.userId
                            }
                        }).then(function(res){
                            if(res.data.ok===1){
                                 that.getArticleList()
                            }
                        })
                    }else{
                        that.$store.commit('ISLOGING',false);  
                    }
                })
            },
            // 获取文章列表
            getArticleList:function(){
                var that = this ;
        
                axios('/api/islogin').then(function(response){
                    if(response.data.state==='1'){
                        that.$store.commit('USERID',response.data.id)
                        that.$store.commit('ISLOGING',true)   
                    
                        axios.get('/api/personal/getArticles',{
                            params:{
                                _id:that.$store.state.userId
                            }
                        }).then(function(response){
                            that.articles = response.data; 
                            for(var i=0; i<that.articles.length; i++){
                                that.$set(that.isdel,i,false)
                            }          
                        }).catch(function(err){
                            console.log(err)
                        })
                        
                    }else{
                        that.$store.commit('ISLOGING',false);
                        that.$store.commit('LOGINBOX',true);        
                    }
                })
            }
        }
    }  
</script>
<style lang="scss" src="../../assets/css/articles.scss" scoped>

</style>

